<template>
  <view class="canvas-content" v-show="canvasShow" :style="'width:' + system.w + 'px; height:' + system.h + 'px;'">
    <!-- 遮罩层 -->
    <view class="canvas-mask"></view>
    <!-- 名片 -->
    <!-- :width="system.w" :height="system.h" 支付宝必须要这样设置宽高才有效果 -->
    <canvas class="canvas" canvas-id="myCanvas" id="myCanvas"
      :style="'width:' + system.w + 'px; height:' + system.h + 'px;'" :width="system.w" :height="system.h"></canvas>
    <view class="button-wrapper">
      <!-- 保存名片按钮 -->
      <!-- #ifndef MP-QQ -->
      <!-- cover-view 标签qq小程序有问题 -->
      <cover-view class="save-btn" @tap="handleSaveCanvasImage">
        保存名片
      </cover-view>
      <cover-view class="save-btn cancel-btn" @tap="handleCanvasCancel">
        取消
      </cover-view>
      <!-- #endif -->
      <!-- #ifdef MP-QQ -->
      <view class="save-btn" @tap="handleSaveCanvasImage"> 保存名片 </view>
      <view class="save-btn cancel-btn" @tap="handleCanvasCancel"> 取消 </view>
      <!-- #endif -->
    </view>
  </view>
</template>

<script>
	
import { drawSquarePic, drawTextReturnH, getSystem } from "./index.js";
export default {
  data() {
    return {
      system: {},
      canvasShow: false,
    };
  },
  props: {
    posterData: {
      type: Object,
      default: () => {
        return {};
      },
    },
	getHint:{
		type:String,
		default:()=>{
			return ""
		}
	},
	url:{
		type:String,
		default:()=>{
			return ""
		}
	},
	resultTitle:{
		type:String,
		default:()=>{
			return ""
		}
	},
	score:{
		type:Number,
		default:()=>{
			return 0
		}
	}
  },
  computed: {
    /**
     * @description: 计算名片背景数据
     * @param {*}
     * @return {*}
     * @author: hch
     */
    poster() {
      let data = this.posterData;
      let system = this.system;
      let posterBg = {
        url: this.url,
        r: data.poster.r * system.scale,
        w: data.poster.w * system.scale,
        h: data.poster.h * system.scale,
        x: (system.w - data.poster.w * system.scale) / 2,
        y: (system.h - data.poster.h * system.scale) / 2,
        p: data.poster.p * system.scale,
      };
      return posterBg;
    },
    /**
     * @description: 计算名片头部主图
     * @param {*}
     * @return {*}
     * @author: hch
     */

  },
  created() {
    // 获取设备信息
    this.system = getSystem();
  },
  methods: {
    /**
     * @description: 展示名片
     * @param {type}
     * @return {type}
     * @author: hch
     */
    posterShow() {
      this.canvasShow = true;
      this.creatPoster();
    },
    /**
     * @description: 生成名片
     * @author: hch
     */
    async creatPoster() {
      uni.showLoading({
        title: "生成海报中...",
      });
      const ctx = uni.createCanvasContext("myCanvas", this);
      this.ctx = ctx;
      ctx.clearRect(0, 0, this.system.w, this.system.h); // 清空之前的名片
      ctx.draw(); // 清空之前的名片
      // 根据设备屏幕大小和距离屏幕上下左右距离，及圆角绘制背景
      let poster = this.poster;
     
      let codeImg = this.codeImg;
     
     
      await drawSquarePic(
        ctx,
        poster.x,
        poster.y,
        poster.w,
        poster.h,
        poster.r,
        poster.url,
		this.score+'分',
		this.getHint,
		this.resultTitle
		
      );
     

      
     
     
     
      uni.hideLoading();
    },
    /**
     * @description: 保存到系统相册
     * @param {type}
     * @return {type}
     * @author: hch
     */
	
	
	
     handleSaveCanvasImage() {
		 
		 // uni.authorize({
		 //   scope: 'scope.writePhotosAlbum',
		 //   success() {
		 //     console.log('权限授予成功');
		 //     // 可以执行保存图片到相册的操作
		 //   },
		 //   fail() {
		 //     console.log('权限授予失败');
		 //     uni.showModal({
		 //       title: '提示',
		 //       content: '您未授权保存图片，请授权后重试。',
		 //       showCancel: false,
		 //     });
		 //   }
		 // });
		 
		 
          uni.showLoading({
            title: "保存中...",
          });
          let _this = this;
          // 把画布转化成临时文件
          // #ifndef MP-ALIPAY
          // 支付宝小程序外，其他都是用这个方法 canvasToTempFilePath
          uni.canvasToTempFilePath(
            {
              x: this.poster.x,
              y: this.poster.y,
              width: this.poster.w, // 画布的宽
              height: this.poster.h, // 画布的高
              destWidth: this.poster.w * 5,
              destHeight: this.poster.h * 5,
              canvasId: "myCanvas",
              success(res) {
                // 保存图片至相册
                // #ifndef H5
                // 除了h5以外的其他端
                uni.saveImageToPhotosAlbum({
                  filePath: res.tempFilePath,
                  success(res) {
                    uni.hideLoading();
                    uni.showToast({
                      title: "图片保存成功，可以去分享啦~",
                      duration: 2000,
                      icon: "none",
                    });
                    _this.handleCanvasCancel();
                  },
                  fail() {
                    uni.showToast({
                      title: "保存失败，稍后再试",
                      duration: 2000,
                      icon: "none",
                    });
                    uni.hideLoading();
                  },
                  complete(options) {
                    console.log('options:', options)
                  }
                });
                // #endif
    
                // #ifdef H5
                // h5的时候
                uni.showToast({
                  title: "请长按保存",
                  duration: 3000,
                  icon: "none",
                });
                _this.handleCanvasCancel();
                _this.$emit("previewImage", res.tempFilePath);
                // #endif
              },
              fail(res) {
                uni.showToast({
                  title: "保存失败，稍后再试",
                  duration: 2000,
                  icon: "none",
                });
                uni.hideLoading();
              },
            },
            this
          );
          // #endif
          // #ifdef MP-ALIPAY
          // 支付宝小程序条件下 toTempFilePath
          this.ctx.toTempFilePath(
            {
              x: this.poster.x,
              y: this.poster.y,
              width: this.poster.w, // 画布的宽
              height: this.poster.h, // 画布的高
              destWidth: this.poster.w * 5,
              destHeight: this.poster.h * 5,
              success(res) {
                // 保存图片至相册
                uni.saveImageToPhotosAlbum({
                  filePath: res.apFilePath,
                  success(res) {
                    uni.hideLoading();
                    uni.showToast({
                      title: "图片保存成功，可以去分享啦~",
                      duration: 2000,
                      icon: "none",
                    });
                    _this.handleCanvasCancel();
                  },
                  fail() {
                    uni.showToast({
                      title: "保存失败，稍后再试",
                      duration: 2000,
                      icon: "none",
                    });
                    uni.hideLoading();
                  },
                });
              },
              fail(res) {
                uni.showToast({
                  title: "保存失败，稍后再试",
                  duration: 2000,
                  icon: "none",
                });
                uni.hideLoading();
              },
            },
            this
          );
          // #endif
        },
    /**
     * @description: 取消名片
     * @param {type}
     * @return {type}
     * @author: hch
     */
    handleCanvasCancel() {
      this.canvasShow = false;
      uni.hideLoading();
      this.$emit("cancel", true);
    },
  },
};
</script>

<style lang="less">
.content {
  height: 100%;
  text-align: center;
}

.canvas-content {
  position: absolute;
  top: 0;

  .canvas-mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
  }

  .canvas {
    z-index: 10;
  }

  .button-wrapper {
    position: fixed;
    bottom: 20rpx;
    z-index: 16;
    display: flex;
    width: 100%;
	bottom: 50rpx;
    height: 72rpx;
    justify-content: space-around;
  }

  .save-btn {
    z-index: 16;
    width: 40%;
    height: 100%;
    font-size: 30rpx;
    line-height: 72rpx;
    color: #fff;
    text-align: center;
    background: #CCA566;
    border-radius: 45rpx;
    border-radius: 36rpx;
  }

  .cancel-btn {
    color: #CCA566;
    background: #fff;
  }

  .canvas-close-btn {
    position: fixed;
    top: 30rpx;
    right: 0;
    z-index: 12;
    width: 60rpx;
    height: 60rpx;
    padding: 20rpx;
  }
}
</style>
